<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>OA管理系统</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <style type="text/css">
        @media screen and (max-width: 768px){
            .total{
                flex-direction: column;
                height: 25rem;
                width: 10rem;
                padding-bottom: 10px;
            }
            .fileSynchronization,.newFileUpload,.getTheFile{
                width: 100%!important;
                height: 33%!important;
            }
            legend{
                font-size: 0.7rem;
            }
            .progressBar{
                width: 100%!important;
            }
            .layui-upload-drag,.layui-progress-big,.xiazai{
                width: 50%!important;
                font-size: 0.7rem;
            }
            .layui-progress-big{
                padding: 0 10px!important;
            }
            .layui-upload-drag,.xiazai{
                padding: 10px!important;
            }
            .line{

            }

        }
    </style>
</head>
<body>
<script>
    layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.$
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;

        $("#xiazai").click(function() {
            $("#returnForm").submit();
        });
        //文件同步上传
        upload.render({
            elem: '#updiv'
            ,url: '/resource/sync'
            ,accept:'file',
                type: 'post'
            ,done: function(res){
                element.progress('demo', 100 + '%');
                layer.msg('上传完毕', {icon: 1});
            }
            ,error: function(){
        }
            ,progress: function(n, elem, e){
                element.progress('demo', n-1 + '%');
        }
        });
        //文件新增上传
        upload.render({
            elem: '#upnewdiv'
            ,url: '/resource/addnew'
            ,accept:'file'
            ,done: function(res){
                element.progress('demo1', 100 + '%');
                layer.msg('上传完毕', {icon: 1});
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            ,progress: function(n, elem, e){
                element.progress('demo1', n-1 + '%'); //可配合 layui 进度条元素使用
            }
        });

    });
</script>
<style>
    .line{
        background:#E7E7E7;/*背景色为浅灰色*/
        width:1px;/*设置宽高*/
        height:1200px;
    }
    .xiazai{
        position: relative;
        display: inline-block;
        padding: 30px;
        border: 1px dashed #e2e2e2;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;
    }
</style>
<div style="display: flex" class="total">
    <div style="width: 33%" class="fileSynchronization">
        <legend>文件同步</legend>
        <div class="layui-upload-drag" id="updiv" style="width: 260px;">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
        </div>
        <div style="width: 322px;" class="progressBar">
            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                <div class="layui-progress-bar" lay-percent=""></div>
            </div>
        </div>
    </div>
    <div class="line"></div>
    <div style="width: 33%" class="newFileUpload">
       <legend>新文件上传</legend>
       <div class="layui-upload-drag" id="upnewdiv" style="width: 260px;">
           <i class="layui-icon"></i>
           <p>点击上传(手机号去重)</p>
       </div>
       <div style="width: 322px;" class="progressBar">
           <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo1">
               <div class="layui-progress-bar" lay-percent=""></div>
           </div>
       </div>
   </div>
    <div class="line"></div>
    <div style="width: 33%" class="getTheFile">
        <legend>获取重复/不重复文件</legend>
        <div class="xiazai"id="xiazai" style="width: 260px;">
            <i class="layui-icon layui-icon-download-circle" style="font-size: 50px; color: #009688;"></i>
            <p>获取</p>
        </div>
        <form action="/resource/getreturnexcel" id="returnForm"></form>
    </div>
</div>
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
<!--    <legend>文件同步</legend>-->
<!--</fieldset>-->


<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
<!--    <legend>新文件上传</legend>-->
<!--</fieldset>-->



<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
<!--    <legend>获取重复/不重复文件</legend>-->
<!--</fieldset>-->
<div>
    <input style="display: none" name="qtname">

</div>
</body>
</html>